<template>
  <div>
    <c-title :hide="false" :text="text"></c-title>
    <van-search v-model="searchValue" placeholder="请输入商品名称" shape="round" />
    <main class="main" v-for="item in listData" :key="item.id" @click="toGoods(item.id)">
      <div class="box">
        <van-image class="goods-img"  width="6.5rem" height="6.5rem" :src="item.thumb" />
        <div class="goods-info">
          <div class="goods-title">{{item.title}}</div>
          <div class="price">￥{{item.price}}</div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import mixins from "./components/mixin";
import { Image } from "vant";
export default {
  mixins:[mixins],
  data() {
    return {
      text: "",
      searchValue: "",
      httpUrl:"plugin.lawyer-platform.frontend.controllers.goods.getList"
    };
  },
  activated(){
    this.text = this.$route.params.consult_type==0?'电话咨询':"在线咨询";
  },
  methods: {
    toGoods(id){
      this.$router.push(this.fun.getUrl("goods",{id}))
    },
    getSearch() {
      let json = {
        kwd: this.searchValue,
        goods_type: this.$route.params.consult_type
      };
      $http.post("plugin.lawyer-platform.frontend.controllers.goods.getList", json).then(res => {
        if(res.result == 1){
          this.listData = res.data.list.data;
        }
      })
    }
  },
  watch: {
    searchValue() {
      if (this.timerId) {
        clearTimeout(this.timerId);
      }
      this.timerId = setTimeout(() => {
        this.getSearch();
      }, 300);
    }
  },
  components: {
    VanImage: Image
  }
};
</script>

<style lang="scss" scoped>
.main {
  border-top: 1px solid #f2f2f2;
}

.box {
  background-color: #fff;
  display: flex;
  padding: 1rem;
}

.goods-info {
  margin-left: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
}

.price {
  color: #f14e4e;
}
</style>
